<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0 0;
            padding: 0 0;
        }

        .container {
            width: 100%;
            height: 100%;
            padding: 10px 10px;
        }

        .workspace {
            width: 100%;
            height: 100%;
            background-color: transparent;
            position: relative;
            overflow: auto;
            border: 1px solid lightskyblue;
        }

        .main-canvas {
            position: absolute;
            top: 10px;
            left: 10px;
            /*background-color: #00a0e9;*/
            width: 1500px;
            height: 750px;

        }
    </style>
</head>
<body>
<div class="container">
    <div class="workspace">
        <canvas id="canvas" width='1500' height='750' class="main-canvas"></canvas>
    </div>
</div>

</body>
<script src="/views/work/canvas.js"></script>
<script>
    var canvas = $('#canvas');
    var ctx = canvas[0].getContext('2d'), isMove = false, activitys = [], current;

    function Activity(position, text, focus) {
        debugger;
        this.position = position;
        this.text = text;
        this.focus = focus;
    }
    function writeText(point) {
        ctx.clearRect(0, 0, 250, 25);
        ctx.font = "12px Courier New";
        ctx.fillStyle = "blue";
        ctx.fillText("坐标：x：" + point.x + ",y:" + point.y, 5, 20);
    }
    function draw(rect, p) {
        ctx.clearRect(0, 0, canvas[0].width, canvas[0].height);
        activitys.forEach(function (v, i) {
            ctx.beginPath();
            if (v.focus) {
                ctx.fillStyle = '#7c7c7c';
            } else {
                ctx.fillStyle = '#ffffff';
            }
            ctx.rect(v.position.x, v.position.y, math.constants.rectangle.width, math.constants.rectangle.height);
            ctx.fillText(v.text, v.position.x + 10, v.position.y + (math.constants.rectangle.height / 2 - 10));
            ctx.stroke();
            if (p && ctx.isPointInPath(p.x, p.y)) {
                debugger;
                v.focus = true;
                current = v;
            } else {
                v.focus = false;
            }
            if (v.focus) {
                ctx.fillStyle = '#7c7c7c';
            } else {
                ctx.fillStyle = '#ffffff';
            }
            ctx.rect(v.position.x, v.position.y, math.constants.rectangle.width, math.constants.rectangle.height);
            ctx.fillText(v.text, v.position.x + 10, v.position.y + (math.constants.rectangle.height / 2 - 10));
            ctx.stroke();
        });
    }
    function getEventPosition(ev) {
        var x, y;
        if (ev.layerX || ev.layerX == 0) {
            x = ev.layerX;
            y = ev.layerY;
        } else if (ev.offsetX || ev.offsetX == 0) { // Opera
            x = ev.offsetX;
            y = ev.offsetY;
        }
        return {'x': x, 'y': y};
    }
    function init() {



        activitys.push(new Activity(math.position({'x': 120, 'y': 180}), "你好", true));
        activitys.push(new Activity(math.position({'x': 350, 'y': 80}), "我好", false));
        draw(activitys);
        canvas.mousedown(function (e) {
            isMove = true;
            point = getEventPosition(e);
            draw(activitys, point);

        }).on("mouseup", function (e) {
            isMove = false;
        }).on("mousemove", function (e) {
            point = getEventPosition(e);
            writeText(point);
            if (isMove) {
                current.position = math.position({'x': point.x, 'y': point.y})
                draw(activitys);
            }
        })
    }
    function find(arr, left, right) {
        if (left < right) {
            var mid = (left + right) / 2;
            if (arr[left] == mid) {
                return mid;
            }
            else if (arr[left] < mid) {
                left = mid - 1;
                return    find(arr, left, right);
            } else if (arr[left] > mid) {
                right = mid + 1;
                return  find(arr, left, right);
            }
        } else {
            return 0;
        }

    }
    function dispose() {
    }
</script>
</html>